<template>
	<view class="skill-main">
		<view class="skill-title">最多可添加3个，每个标签不超过8个字</view>
		<view class="skill-item" v-for="(item,index) in itemList" :key="index">
			<view class="skill-item-label">{{item.label}}</view>
			<uni-easyinput class="skill-item-input" type="text" v-model="user.tel" :placeholder="item.placeholder"
				:inputBorder="false" :placeholderStyle="placeholderStyle" maxlength="8" />
		</view>
		<button type="default" class="submit-btn" @click="onSubmitClick">保存</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				placeholderStyle: "font-size:28rpx;color:#d2d2d2;text-align: right;",
				itemList: [{
					label: "标签一",
					placeholder: "例：文笔出众"
				}, {
					label: "标签二",
					placeholder: "例：英语"
				}, {
					label: "标签三",
					placeholder: "例：摄影达人"
				}]
			}
		},
		methods: {
			onSubmitClick() {
				uni.navigateBack()
			}
		}
	}
</script>

<style>
	.skill-main {
		padding: 0 32rpx;
	}

	.skill-title {
		margin-top: 40px;
		font-size: 28rpx;
		color: #7B7B7B;
		background: url(../../static/images/icon_service-tips@3x.png) left center no-repeat;
		background-size: 28rpx;
		padding-left: 33rpx;
	}

	.skill-item {
		margin-top: 28rpx;
		height: 76rpx;
		border-radius: 4rpx;
		background-color: #F4F4F4;
		display: flex;
		padding: 0 28rpx;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		color: #181818;
	}

	.skill-item-label {
		color: #7B7B7B;
	}

	.skill-item-input input {
		text-align: right;
	}

	.submit-btn {
		position: fixed;
		bottom: 98rpx;
		margin: 0 !important;
	}
</style>
